<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body onload="loadDataList()">

<br>
<form class="form-horizontal">

    <div class="form-group">

        <label class="col-md-2" align="right"></label>
        <div class="col-md-2">
                <input type="text" id="name" class="form-control" placeholder="请输入菜名">
        </div>

        <input type="button" class="btn btn-success btn-sm" onclick="loadDataList()" value="查询">
    </div>
</form>
<button class="btn-success" onclick="bitDelte()">下架</button>
<table class="table">
    <thead>
        <th><input type="checkbox" name="selectId" onclick="quanxuan(this)">全选</th>
        <th>编号</th>
        <th>图标</th>
        <th>菜名</th>
        <th>单价</th>

    </thead>

    <tbody id="tb">

    </tbody>
</table>
    <div>
    <button type="button" class="btn btn-success btn-sm" onclick="pres()">上一页</button>
    <button type="button" class="btn btn-success btn-sm" onclick="nexts()">下一页</button>
    一共有<span id="total"></span>数据，共有<span id="totalPage"></span>页
    </div>
</body>

<script>
    //默认页面是第一页
        var page = 1;
        var row = 5;
        var totalPage = 0;

    //上一页
    function pres() {
        page--;
        if (page < 1) {
        page = 1;
    }
    loadDataList();
    }

    //下一页
    function nexts() {
        page++;
        if (page > totalPage) {
        page = totalPage;
        }

         loadDataList();

    }
    //加载数据
    function loadDataList() {
        var name = $("#name").val();

        $.ajax({
            url: "${pageContext.request.contextPath}/menu/listAjax",
            type: "get",
            data: { "eName": name,"page": page, "row": row},
            dataType: "json",
            success: function (data) {
                console.log(data);
                console.log(typeof (data.info));
                if (typeof (data.info) == "string") {
                    alert(data.info);
                    //清空
                    $("#tb").html(data.info);
                } else {
                    //取出总页数

                    totalPage = data.totalPage;
                    //显示总条数
                    $("#total").text(data.total);
                    //显示总页数
                    $("#totalPage").text(totalPage);

                    var html = "";
                    for (var i = 0; i < data.info.length; i++) {
                        html += "<tr class='warning'>" +
                            "<td><input  type=\"checkbox\" name=\"selectId\" value='" + data.info[i].eId + "'></td>" +
                            "<td class='success'>" + data.info[i].eId + "</td>" +
                            "<td>" +" <img src=\"${pageContext.request.contextPath}/icon/"+data.info[i].eIcon+"\" "+" style=\"width"+":"+150+"px;height:"+100+"px\" + /></td>" +
                            "<td>" + data.info[i].eName + "</td>" +
                            "<td>" + data.info[i].ePrice + "</td>" +
                            "</tr>";
                    }

                    $("#tb").html(html);
                }


            }})
    }
        //全选
        function quanxuan(obj) {
        //1 获取全选的值
        var v = $(obj).prop("checked");
        console.log(v);
        $("input[name='selectId']").prop("checked",v);
        $("input[name='selectId']").prop("checked",$(obj).prop("checked"));
        }
         //批量删除
          function bitDelte() {
            var arrid = ""
            /*jquery伪类选择*/
            /* $("input[type='checkbox']:checked") 获取所有选中的复选框*/
            $("input[type='checkbox']:checked").each(function () {
            arrid += $(this).val() + ",";
            })
            console.log(arrid);

          var is = confirm("你确定要删除吗");
         if (is) {
            $.ajax({
            url: "${pageContext.request.contextPath}/menu/delAjax",
            type: "get",
            data: {"arrId": arrid},
            dataType: "json",
            success: function (data) {
            console.log(data);
            if (data.info == "批量删除成功") {
         //刷新
         loadDataList();
          }

         }
        })
         }
    }


</script>


</html>